<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="refresh" content="300">
    <title>轮播</title>
    <script src="libs/jquery.min.js"></script>
    <style type="text/css">
        *{margin:0;padding:0;}
        html,body{
            width: 100%;height: 100%;
        }
        img{display:block;width: 100%;height: 100%}
        .banner {width:500px;height:300px;background:#cccccc;overflow:hidden;position:relative;}
        .banner ul { position:absolute;left:0;top:0;z-index:100;}
        .banner ul li { display:block;width:500px;height:300px;float:left;}
        .banner .con { position:absolute; left:45%; bottom:3%;z-index:101; }
        .banner .con a { float:left; margin-right:8px; display:block; width:8px; height:8px; border-radius:100%; background:#000;z-index:101;}
        .banner .con a.active { background:#fff;}
        .banner .u { width:30px;height:20px;background:rgba(255,255,255,0.5); display:none;}
        .banner .left { position:absolute; top:40%;left:2%;z-index:103;}
        .banner .right { position:absolute; top:40%;right:2%;z-index:103;}
    </style>
</head>
<body>

<div class="banner">

    <ul>

    </ul>


</div>

<script type="text/javascript">

    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }

    var index = 0;
    var imgnum;
    var nmun='';
    var imgwidth;
    var allimgwidth;

    var baseURL = "/smart-campus/";


    $(document).ready(function(){
        var param_w = GetQueryString("w");
        var param_h = GetQueryString("h");
        if (param_w !=null && param_w.toString().length > 1) {
            $("html").css("width", param_w + "px");
        }

        if (param_h !=null && param_h.toString().length > 1) {
            $("html").css("height", param_h + "px");
        }

        $.ajax({
            url:baseURL + "/api/base/getSchoolShowList",
            method:"post",
            success:function(data){
                var html = "";
                for (var m=0;m<data.schoolShowList.length;m++){

                    for (var n=0;n<data.schoolShowList[m].schoolShowImgList.length;n++){
                        html+= '<li><img src="' + data.schoolShowList[m].schoolShowImgList[n].imgUrl +'" /></li>'
                    }

                }
                /*for(var i=0;i<data.schoolImgs.length;i++){
                    html+= '<li><img src='+ 'http://139.224.104.91:8080/' + data.schoolImgs[i].imgUrl +' /></li>'
                }*/
                $(".banner ul").html(html)
                $(".banner").width($("html").width());
                $(".banner ul li").width($("html").width());
                $(".banner").height($("html").height());
                $(".banner ul li").height($("html").height());

                imgnum = $('.banner ul li').length;
                nmun='';
                imgwidth = $('.banner ul li').width();
                allimgwidth = imgwidth*imgnum;
                $('.banner ul').css('width',allimgwidth);
            }
        })

    });


    $('.banner').hover(function(){
        clearInterval(p);
        $('.banner .u').fadeIn();
    },function(){
        pic();
        $('.banner .u').fadeOut();
    });

    function pic(){

        p=setInterval(function(){
            index++;

            if(index>=imgnum){
                index=0;
            }

            selectimg(index);

        },3000);

    }

    function selectimg(index){
        $('.banner ul').animate({'margin-left':'-' + imgwidth*index + 'px'},600);
        $('.con a').eq(index).addClass('active').siblings('a').removeClass('active');
    }


    $('.banner .left').click(function(){
        index-=1;
        if(index<0){
            index=imgnum-1;
        }
        selectimg(index);

    });

    $('.banner .right').click(function(){
        index+=1;
        if(index>imgnum-1){
            index=0;
        }
        selectimg(index);

    });

    for(var ni=0;ni<imgnum;ni++){
        nmun +="<a href='javascript:;'></a>";
    }
    $('.banner .con').html(nmun);
    $('.banner .con a').eq(0).addClass('active');

    $('.con a').each(function(i){
        $(this).click(function(){
            index=i;
            $('.banner ul').animate({'margin-left':'-' + imgwidth*i + 'px'},600);
            $('.con a').eq(index).addClass('active').siblings('a').removeClass('active');
        });
    });

    pic();
</script>


</body>
</html>
